<template>
  <div
    style="display: flex; width: 100%; justify-content: space-around"
    v-loading="log"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <Card style="width: 40%; height: 70vh">
      <template #title>菜单列表</template>
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      </el-input>
      <el-tree
        style="margin-top: 20px"
        @node-click="handleNodeClick"
        accordion
        :filter-node-method="filterNode"
        :data="menus"
        show-checkbox
        node-key="id"
        ref="tree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="() => append(data)">
              Append
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              Delete
            </el-button>
          </span>
        </span>
      </el-tree>
    </Card>
    <Card style="width: 60%; height: 70vh">
      <template #title>编辑菜单按钮权限配置</template>
      <el-table
        :data="resourcesData"
        style="width: 100%"
        max-height="440"
        ref="multipleTable"
      >
        <el-table-column prop="code" label="序号" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="120">
        </el-table-column>
        <el-table-column prop="code" label="权限按钮" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <div>
            <el-link type="primary">编辑</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary">删除</el-link>
          </div>
        </el-table-column>
      </el-table>
    </Card>
  </div>
</template>

<script>
let id = 1000;

export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {
    return {
      log: true,
      data: {}, //初始化数据
      resourcesData: [], //资源数据
      menus: [],
      filterText: "",
    };
  },
  created() {
    this.findMenuResources();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    append(data) {
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    findMenuResources() {
      try {
        this.axios
          .post("/api/auth/pd_auth_menu/findMenuResources")
          .then((r) => {
            if (r.data.code == 11051) {
              this.log = false;
              this.$Message.error(r.data.msg);
            }
            if (r.data.code == 200) {
              this.data = r.data.data;
              let menus = [];
              r.data.data.menus.forEach((m1) => {
                if (m1.parentId == 0) {
                  var m1 = {
                    id: m1.id,
                    label: m1.name,
                    children: [],
                  };
                  r.data.data.menus.forEach((m2) => {
                    if (m1.id == m2.parentId) {
                      var m2 = {
                        id: m2.id,
                        label: m2.name,
                        children: [],
                      };
                      m1.children.push(m2);
                      r.data.data.menus.forEach((m3) => {
                        if (m2.id == m3.parentId) {
                          var m3 = {
                            id: m3.id,
                            label: m3.name,
                          };
                          m2.children.push(m3);
                        }
                      });
                    }
                  });
                  menus.push(m1);
                }
              });
              this.menus = menus;
              this.log = false;
            }
          });
      } catch (error) {}
    },
    handleNodeClick(node) {
      console.log(this.data);
      this.resourcesData = [];
      this.data.resources.forEach((r) => {
        if (r.menuId == node.id) {
          this.resourcesData.push(r);
        }
      });
    },
  },
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
